<template>
	<view>
		<view
			class="tm-sticky flex flex-col"
			:style="[
				props.model == 'top' ? { top: `${_offset}` } : '',
				props.model == 'left' ? { left: `${_offset}` } : '',
				{ 'z-index': props.zIndex }
			]"
		>
			<view class="flex flex-col">
				<slot name="sticky"></slot>
			</view>
		</view>
		<view>
			<slot></slot>
		</view>
	</view>
</template>
<script lang="ts" setup>
/**
 * 粘性定位
 * @description 请注意使用方法，为了兼容所有端，如果你想让粘性在某块区域，必须把其它内容套在本组件内。
 * @slot sticky 定位内容
 * @slot default 正常的布局文档内容
 * @example  <tm-sticky >
                <template v-slot:sticky>
                        <!-- 这里是粘性内容 -->
                        <text>{{ status }}{{statusw}}</text>
                </template>
                <!-- 这里放置你的内容内容 -->
            </tm-sticky>
 */
import { computed, ref } from 'vue'
const props = defineProps({
	//可能的值为:left,top
	//默认为：top
	model: {
		type: String,
		default: 'top'
	},
	offset: {
		type: [String, Number],
		default: '0px'
	},
	//层级对于nvue是无效的。
	zIndex: {
		type: Number,
		default: 50
	}
})
const _offset = computed(() => {
	if (typeof props.offset === 'number') return props.offset + 'rpx'
	return props.offset
})
</script>
<style scoped>
.tm-sticky {
	position: sticky;
}
</style>
